<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js">
    <head>
        <!-- Book generated using mdBook -->
        <meta charset="UTF-8">
        <title>Importing a function from JS - The `wasm-bindgen` Guide</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="theme-color" content="#ffffff" />

        <link rel="shortcut icon" href="../../favicon.png">
        <link rel="stylesheet" href="../../css/variables.css">
        <link rel="stylesheet" href="../../css/general.css">
        <link rel="stylesheet" href="../../css/chrome.css">
        <link rel="stylesheet" href="../../css/print.css" media="print">

        <!-- Fonts -->
        <link rel="stylesheet" href="../../FontAwesome/css/font-awesome.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css">

        <!-- Highlight.js Stylesheets -->
        <link rel="stylesheet" href="../../highlight.css">
        <link rel="stylesheet" href="../../tomorrow-night.css">
        <link rel="stylesheet" href="../../ayu-highlight.css">

        <!-- Custom theme stylesheets -->
        

        
    </head>
    <body class="light">
        <!-- Provide site root to javascript -->
        <script type="text/javascript">
            var path_to_root = "../../";
            var default_theme = "light";
        </script>

        <!-- Work around some values being stored in localStorage wrapped in quotes -->
        <script type="text/javascript">
            try {
                var theme = localStorage.getItem('mdbook-theme');
                var sidebar = localStorage.getItem('mdbook-sidebar');

                if (theme.startsWith('"') && theme.endsWith('"')) {
                    localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
                }

                if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
                    localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
                }
            } catch (e) { }
        </script>

        <!-- Set the theme before any content is loaded, prevents flash -->
        <script type="text/javascript">
            var theme;
            try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } 
            if (theme === null || theme === undefined) { theme = default_theme; }
            document.body.className = theme;
            document.querySelector('html').className = theme + ' js';
        </script>

        <!-- Hide / unhide sidebar before it is displayed -->
        <script type="text/javascript">
            var html = document.querySelector('html');
            var sidebar = 'hidden';
            if (document.body.clientWidth >= 1080) {
                try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
                sidebar = sidebar || 'visible';
            }
            html.classList.remove('sidebar-visible');
            html.classList.add("sidebar-" + sidebar);
        </script>

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <ol class="chapter"><li class="affix"><a href="../../introduction.html">Introduction</a></li><li class="spacer"></li><li><a href="../../examples/index.html"><strong aria-hidden="true">1.</strong> Examples</a></li><li><ol class="section"><li><a href="../../examples/hello-world.html"><strong aria-hidden="true">1.1.</strong> Hello, World!</a></li><li><a href="../../examples/console-log.html"><strong aria-hidden="true">1.2.</strong> Using console.log</a></li><li><a href="../../examples/add.html"><strong aria-hidden="true">1.3.</strong> Small Wasm files</a></li><li><a href="../../examples/without-a-bundler.html"><strong aria-hidden="true">1.4.</strong> Without a Bundler</a></li><li><a href="../../examples/synchronous-instantiation.html"><strong aria-hidden="true">1.5.</strong> Synchronous Instantiation</a></li><li><a href="../../examples/import-js.html"><strong aria-hidden="true">1.6.</strong> Importing functions from JS</a></li><li><a href="../../examples/char.html"><strong aria-hidden="true">1.7.</strong> Working with char</a></li><li><a href="../../examples/wasm-in-wasm.html"><strong aria-hidden="true">1.8.</strong> js-sys: WebAssembly in WebAssembly</a></li><li><a href="../../examples/dom.html"><strong aria-hidden="true">1.9.</strong> web-sys: DOM hello world</a></li><li><a href="../../examples/closures.html"><strong aria-hidden="true">1.10.</strong> web-sys: Closures</a></li><li><a href="../../examples/performance.html"><strong aria-hidden="true">1.11.</strong> web-sys: performance.now</a></li><li><a href="../../examples/fetch.html"><strong aria-hidden="true">1.12.</strong> web-sys: using fetch</a></li><li><a href="../../examples/weather_report.html"><strong aria-hidden="true">1.13.</strong> web-sys: Weather report</a></li><li><a href="../../examples/2d-canvas.html"><strong aria-hidden="true">1.14.</strong> web-sys: canvas hello world</a></li><li><a href="../../examples/julia.html"><strong aria-hidden="true">1.15.</strong> web-sys: canvas Julia set</a></li><li><a href="../../examples/web-audio.html"><strong aria-hidden="true">1.16.</strong> web-sys: WebAudio</a></li><li><a href="../../examples/webgl.html"><strong aria-hidden="true">1.17.</strong> web-sys: WebGL</a></li><li><a href="../../examples/websockets.html"><strong aria-hidden="true">1.18.</strong> web-sys: WebSockets</a></li><li><a href="../../examples/webrtc_datachannel.html"><strong aria-hidden="true">1.19.</strong> web-sys: WebRTC DataChannel</a></li><li><a href="../../examples/request-animation-frame.html"><strong aria-hidden="true">1.20.</strong> web-sys: requestAnimationFrame</a></li><li><a href="../../examples/paint.html"><strong aria-hidden="true">1.21.</strong> web-sys: A Simple Paint Program</a></li><li><a href="../../examples/wasm-in-web-worker.html"><strong aria-hidden="true">1.22.</strong> web-sys: Wasm in Web Worker</a></li><li><a href="../../examples/raytrace.html"><strong aria-hidden="true">1.23.</strong> Parallel Raytracing</a></li><li><a href="../../examples/wasm-audio-worklet.html"><strong aria-hidden="true">1.24.</strong> Wasm Audio Worklet</a></li><li><a href="../../examples/todomvc.html"><strong aria-hidden="true">1.25.</strong> web-sys: A TODO MVC App</a></li></ol></li><li><a href="../../reference/index.html"><strong aria-hidden="true">2.</strong> Reference</a></li><li><ol class="section"><li><a href="../../reference/deployment.html"><strong aria-hidden="true">2.1.</strong> Deployment</a></li><li><a href="../../reference/js-snippets.html"><strong aria-hidden="true">2.2.</strong> JS snippets</a></li><li><a href="../../reference/static-js-objects.html"><strong aria-hidden="true">2.3.</strong> Static JS Objects</a></li><li><a href="../../reference/passing-rust-closures-to-js.html"><strong aria-hidden="true">2.4.</strong> Passing Rust Closures to JS</a></li><li><a href="../../reference/receiving-js-closures-in-rust.html"><strong aria-hidden="true">2.5.</strong> Receiving JS Closures in Rust</a></li><li><a href="../../reference/js-promises-and-rust-futures.html"><strong aria-hidden="true">2.6.</strong> Promises and Futures</a></li><li><a href="../../reference/iterating-over-js-values.html"><strong aria-hidden="true">2.7.</strong> Iterating over JS Values</a></li><li><a href="../../reference/arbitrary-data-with-serde.html"><strong aria-hidden="true">2.8.</strong> Arbitrary Data with Serde</a></li><li><a href="../../reference/accessing-properties-of-untyped-js-values.html"><strong aria-hidden="true">2.9.</strong> Accessing Properties of Untyped JS Values</a></li><li><a href="../../reference/working-with-duck-typed-interfaces.html"><strong aria-hidden="true">2.10.</strong> Working with Duck-Typed Interfaces</a></li><li><a href="../../reference/cli.html"><strong aria-hidden="true">2.11.</strong> Command Line Interface</a></li><li><a href="../../reference/optimize-size.html"><strong aria-hidden="true">2.12.</strong> Optimizing for Size</a></li><li><a href="../../reference/rust-targets.html"><strong aria-hidden="true">2.13.</strong> Supported Rust Targets</a></li><li><a href="../../reference/browser-support.html"><strong aria-hidden="true">2.14.</strong> Supported Browsers</a></li><li><a href="../../reference/weak-references.html"><strong aria-hidden="true">2.15.</strong> Support for Weak References</a></li><li><a href="../../reference/reference-types.html"><strong aria-hidden="true">2.16.</strong> Support for Reference Types</a></li><li><a href="../../reference/types.html"><strong aria-hidden="true">2.17.</strong> Supported Types</a></li><li><ol class="section"><li><a href="../../reference/types/imported-js-types.html"><strong aria-hidden="true">2.17.1.</strong> Imported JavaScript Types</a></li><li><a href="../../reference/types/exported-rust-types.html"><strong aria-hidden="true">2.17.2.</strong> Exported Rust Types</a></li><li><a href="../../reference/types/jsvalue.html"><strong aria-hidden="true">2.17.3.</strong> JsValue</a></li><li><a href="../../reference/types/boxed-slices.html"><strong aria-hidden="true">2.17.4.</strong> Box&lt;[T]&gt; and Vec<T></a></li><li><a href="../../reference/types/pointers.html"><strong aria-hidden="true">2.17.5.</strong> *const T and *mut T</a></li><li><a href="../../reference/types/non-null.html"><strong aria-hidden="true">2.17.6.</strong> NonNull<T></a></li><li><a href="../../reference/types/numbers.html"><strong aria-hidden="true">2.17.7.</strong> Numbers</a></li><li><a href="../../reference/types/bool.html"><strong aria-hidden="true">2.17.8.</strong> bool</a></li><li><a href="../../reference/types/char.html"><strong aria-hidden="true">2.17.9.</strong> char</a></li><li><a href="../../reference/types/str.html"><strong aria-hidden="true">2.17.10.</strong> str</a></li><li><a href="../../reference/types/string.html"><strong aria-hidden="true">2.17.11.</strong> String</a></li><li><a href="../../reference/types/number-slices.html"><strong aria-hidden="true">2.17.12.</strong> Number Slices</a></li><li><a href="../../reference/types/boxed-number-slices.html"><strong aria-hidden="true">2.17.13.</strong> Boxed Number Slices</a></li><li><a href="../../reference/types/result.html"><strong aria-hidden="true">2.17.14.</strong> Result&lt;T, E&gt;</a></li></ol></li><li><a href="../../reference/attributes/index.html"><strong aria-hidden="true">2.18.</strong> #[wasm_bindgen] Attributes</a></li><li><ol class="section"><li><a href="../../reference/attributes/on-js-imports/index.html"><strong aria-hidden="true">2.18.1.</strong> On JavaScript Imports</a></li><li><ol class="section"><li><a href="../../reference/attributes/on-js-imports/catch.html"><strong aria-hidden="true">2.18.1.1.</strong> catch</a></li><li><a href="../../reference/attributes/on-js-imports/constructor.html"><strong aria-hidden="true">2.18.1.2.</strong> constructor</a></li><li><a href="../../reference/attributes/on-js-imports/extends.html"><strong aria-hidden="true">2.18.1.3.</strong> extends</a></li><li><a href="../../reference/attributes/on-js-imports/getter-and-setter.html"><strong aria-hidden="true">2.18.1.4.</strong> getter and setter</a></li><li><a href="../../reference/attributes/on-js-imports/final.html"><strong aria-hidden="true">2.18.1.5.</strong> final</a></li><li><a href="../../reference/attributes/on-js-imports/indexing-getter-setter-deleter.html"><strong aria-hidden="true">2.18.1.6.</strong> indexing_getter, indexing_setter, and indexing_deleter</a></li><li><a href="../../reference/attributes/on-js-imports/js_class.html"><strong aria-hidden="true">2.18.1.7.</strong> js_class = &quot;Blah&quot;</a></li><li><a href="../../reference/attributes/on-js-imports/js_name.html"><strong aria-hidden="true">2.18.1.8.</strong> js_name</a></li><li><a href="../../reference/attributes/on-js-imports/js_namespace.html"><strong aria-hidden="true">2.18.1.9.</strong> js_namespace</a></li><li><a href="../../reference/attributes/on-js-imports/method.html"><strong aria-hidden="true">2.18.1.10.</strong> method</a></li><li><a href="../../reference/attributes/on-js-imports/module.html"><strong aria-hidden="true">2.18.1.11.</strong> module = &quot;blah&quot;</a></li><li><a href="../../reference/attributes/on-js-imports/raw_module.html"><strong aria-hidden="true">2.18.1.12.</strong> raw_module = &quot;blah&quot;</a></li><li><a href="../../reference/attributes/on-js-imports/no_deref.html"><strong aria-hidden="true">2.18.1.13.</strong> no_deref</a></li><li><a href="../../reference/attributes/on-js-imports/static_method_of.html"><strong aria-hidden="true">2.18.1.14.</strong> static_method_of = Blah</a></li><li><a href="../../reference/attributes/on-js-imports/structural.html"><strong aria-hidden="true">2.18.1.15.</strong> structural</a></li><li><a href="../../reference/attributes/on-js-imports/typescript_type.html"><strong aria-hidden="true">2.18.1.16.</strong> typescript_type</a></li><li><a href="../../reference/attributes/on-js-imports/variadic.html"><strong aria-hidden="true">2.18.1.17.</strong> variadic</a></li><li><a href="../../reference/attributes/on-js-imports/vendor_prefix.html"><strong aria-hidden="true">2.18.1.18.</strong> vendor_prefix</a></li></ol></li><li><a href="../../reference/attributes/on-rust-exports/index.html"><strong aria-hidden="true">2.18.2.</strong> On Rust Exports</a></li><li><ol class="section"><li><a href="../../reference/attributes/on-rust-exports/constructor.html"><strong aria-hidden="true">2.18.2.1.</strong> constructor</a></li><li><a href="../../reference/attributes/on-rust-exports/js_name.html"><strong aria-hidden="true">2.18.2.2.</strong> js_name = Blah</a></li><li><a href="../../reference/attributes/on-rust-exports/js_class.html"><strong aria-hidden="true">2.18.2.3.</strong> js_class = Blah</a></li><li><a href="../../reference/attributes/on-rust-exports/readonly.html"><strong aria-hidden="true">2.18.2.4.</strong> readonly</a></li><li><a href="../../reference/attributes/on-rust-exports/skip.html"><strong aria-hidden="true">2.18.2.5.</strong> skip</a></li><li><a href="../../reference/attributes/on-rust-exports/skip_jsdoc.html"><strong aria-hidden="true">2.18.2.6.</strong> skip_jsdoc</a></li><li><a href="../../reference/attributes/on-rust-exports/start.html"><strong aria-hidden="true">2.18.2.7.</strong> start</a></li><li><a href="../../reference/attributes/on-rust-exports/main.html"><strong aria-hidden="true">2.18.2.8.</strong> main</a></li><li><a href="../../reference/attributes/on-rust-exports/typescript_custom_section.html"><strong aria-hidden="true">2.18.2.9.</strong> typescript_custom_section</a></li><li><a href="../../reference/attributes/on-rust-exports/getter-and-setter.html"><strong aria-hidden="true">2.18.2.10.</strong> getter and setter</a></li><li><a href="../../reference/attributes/on-rust-exports/inspectable.html"><strong aria-hidden="true">2.18.2.11.</strong> inspectable</a></li><li><a href="../../reference/attributes/on-rust-exports/skip_typescript.html"><strong aria-hidden="true">2.18.2.12.</strong> skip_typescript</a></li><li><a href="../../reference/attributes/on-rust-exports/getter_with_clone.html"><strong aria-hidden="true">2.18.2.13.</strong> getter_with_clone</a></li><li><a href="../../reference/attributes/on-rust-exports/unchecked_type.html"><strong aria-hidden="true">2.18.2.14.</strong> unchecked_return_type and unchecked_param_type</a></li><li><a href="../../reference/attributes/on-rust-exports/description.html"><strong aria-hidden="true">2.18.2.15.</strong> return_description and param_description</a></li></ol></li></ol></li></ol></li><li><a href="../../web-sys/index.html"><strong aria-hidden="true">3.</strong> web-sys</a></li><li><ol class="section"><li><a href="../../web-sys/using-web-sys.html"><strong aria-hidden="true">3.1.</strong> Using web-sys</a></li><li><a href="../../web-sys/cargo-features.html"><strong aria-hidden="true">3.2.</strong> Cargo Features</a></li><li><a href="../../web-sys/function-overloads.html"><strong aria-hidden="true">3.3.</strong> Function Overloads</a></li><li><a href="../../web-sys/type-translations.html"><strong aria-hidden="true">3.4.</strong> Type Translations</a></li><li><a href="../../web-sys/inheritance.html"><strong aria-hidden="true">3.5.</strong> Inheritance</a></li><li><a href="../../web-sys/unstable-apis.html"><strong aria-hidden="true">3.6.</strong> Unstable APIs</a></li></ol></li><li><a href="../../wasm-bindgen-test/index.html"><strong aria-hidden="true">4.</strong> Testing with wasm-bindgen-test</a></li><li><ol class="section"><li><a href="../../wasm-bindgen-test/usage.html"><strong aria-hidden="true">4.1.</strong> Usage</a></li><li><a href="../../wasm-bindgen-test/asynchronous-tests.html"><strong aria-hidden="true">4.2.</strong> Writing Asynchronous Tests</a></li><li><a href="../../wasm-bindgen-test/browsers.html"><strong aria-hidden="true">4.3.</strong> Testing in Headless Browsers</a></li><li><a href="../../wasm-bindgen-test/continuous-integration.html"><strong aria-hidden="true">4.4.</strong> Continuous Integration</a></li><li><a href="../../wasm-bindgen-test/coverage.html"><strong aria-hidden="true">4.5.</strong> Coverage (Experimental)</a></li></ol></li><li><a href="../../contributing/index.html"><strong aria-hidden="true">5.</strong> Contributing to wasm-bindgen</a></li><li><ol class="section"><li><a href="../../contributing/testing.html"><strong aria-hidden="true">5.1.</strong> Testing</a></li><li><a href="../../contributing/design/index.html"><strong aria-hidden="true">5.2.</strong> Internal Design</a></li><li><ol class="section"><li><a href="../../contributing/design/js-objects-in-rust.html"><strong aria-hidden="true">5.2.1.</strong> JS Objects in Rust</a></li><li><a href="../../contributing/design/exporting-rust.html"><strong aria-hidden="true">5.2.2.</strong> Exporting a function to JS</a></li><li><a href="../../contributing/design/exporting-rust-struct.html"><strong aria-hidden="true">5.2.3.</strong> Exporting a struct to JS</a></li><li><a href="../../contributing/design/importing-js.html" class="active"><strong aria-hidden="true">5.2.4.</strong> Importing a function from JS</a></li><li><a href="../../contributing/design/importing-js-struct.html"><strong aria-hidden="true">5.2.5.</strong> Importing a class from JS</a></li><li><a href="../../contributing/design/rust-type-conversions.html"><strong aria-hidden="true">5.2.6.</strong> Rust Type conversions</a></li><li><a href="../../contributing/design/describe.html"><strong aria-hidden="true">5.2.7.</strong> Types in wasm-bindgen</a></li></ol></li><li><a href="../../contributing/js-sys/index.html"><strong aria-hidden="true">5.3.</strong> js-sys</a></li><li><ol class="section"><li><a href="../../contributing/js-sys/testing.html"><strong aria-hidden="true">5.3.1.</strong> Testing</a></li><li><a href="../../contributing/js-sys/adding-more-apis.html"><strong aria-hidden="true">5.3.2.</strong> Adding More APIs</a></li></ol></li><li><a href="../../contributing/web-sys/index.html"><strong aria-hidden="true">5.4.</strong> web-sys</a></li><li><ol class="section"><li><a href="../../contributing/web-sys/overview.html"><strong aria-hidden="true">5.4.1.</strong> Overview</a></li><li><a href="../../contributing/web-sys/testing.html"><strong aria-hidden="true">5.4.2.</strong> Testing</a></li><li><a href="../../contributing/web-sys/logging.html"><strong aria-hidden="true">5.4.3.</strong> Logging</a></li><li><a href="../../contributing/web-sys/supporting-more-web-apis.html"><strong aria-hidden="true">5.4.4.</strong> Supporting More Web APIs</a></li></ol></li><li><a href="../../contributing/publishing.html"><strong aria-hidden="true">5.5.</strong> Publishing</a></li><li><a href="../../contributing/team.html"><strong aria-hidden="true">5.6.</strong> Team</a></li></ol></li></ol>
        </nav>

        <div id="page-wrapper" class="page-wrapper">

            <div class="page">
                <style>
  header.warning {
    background-color: rgb(242, 222, 222);
    border-bottom-color: rgb(238, 211, 215);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-style: solid;
    border-bottom-width: 0.666667px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: rgb(238, 211, 215);
    border-left-style: solid;
    border-left-width: 0.666667px;
    border-right-color: rgb(238, 211, 215);
    border-right-style: solid;
    border-right-width: 0.666667px;
    border-top-color: rgb(238, 211, 215);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top-style: solid;
    border-top-width: 0.666667px;
    color: rgb(185, 74, 72);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 30px;
    padding-bottom: 8px;
    padding-left: 14px;
    padding-right: 35px;
    padding-top: 8px;
    text-align: center;
  }
</style>
<header class='warning'>
  This documentation is
  <a
  href="https://blog.rust-lang.org/inside-rust/2025/07/21/sunsetting-the-rustwasm-github-org/">no
  longer maintained at this domain</a>, and is now maintained
  <a href="https://wasm-bindgen.github.io/wasm-bindgen/">
  at wasm-bindgen.github.io</a> instead.
</header>

                <div id="menu-bar" class="menu-bar">
                    <div id="menu-bar-sticky-container">
                        <div class="left-buttons">
                            <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
                                <i class="fa fa-bars"></i>
                            </button>
                            <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
                                <i class="fa fa-paint-brush"></i>
                            </button>
                            <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
                                <li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
                                <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                            </ul>
                            
                        </div>

                        <h1 class="menu-title">The `wasm-bindgen` Guide</h1> 

                        <div class="right-buttons">
                            <a href="../../print.html" title="Print this book" aria-label="Print this book">
                                <i id="print-button" class="fa fa-print"></i>
                            </a>
                            
                        </div>
                    </div>
                </div>

                

                <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
                <script type="text/javascript">
                    document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
                    document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
                    Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
                        link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
                    });
                </script>

                <div id="content" class="content">
                    <main>
                        <a class="header" href="#importing-a-function-from-js" id="importing-a-function-from-js"><h1>Importing a function from JS</h1></a>
<p>Now that we've exported some rich functionality to JS it's also time to import
some! The goal here is to basically implement JS <code>import</code> statements in Rust,
with fancy types and all.</p>
<p>First up, let's say we invert the function above and instead want to generate
greetings in JS but call it from Rust. We might have, for example:</p>
<pre><pre class="playpen"><code class="language-rust">
# #![allow(unused_variables)]
#fn main() {
#[wasm_bindgen(module = &quot;./greet&quot;)]
extern &quot;C&quot; {
    fn greet(a: &amp;str) -&gt; String;
}

fn other_code() {
    let greeting = greet(&quot;foo&quot;);
    // ...
}
#}</code></pre></pre>
<p>The basic idea of imports is the same as exports in that we'll have shims in
both JS and Rust doing the necessary translation. Let's first see the JS shim in
action:</p>
<pre><code class="language-js">import * as wasm from './foo_bg';

import { greet } from './greet';

// ...

export function __wbg_f_greet(ptr0, len0, wasmretptr) {
  const [retptr, retlen] = passStringToWasm(greet(getStringFromWasm(ptr0, len0)));
  (new Uint32Array(wasm.memory.buffer))[wasmretptr / 4] = retlen;
  return retptr;
}
</code></pre>
<p>The <code>getStringFromWasm</code> and <code>passStringToWasm</code> are the same as we saw before,
and like with <code>__wbindgen_object_drop_ref</code> far above we've got this weird export
from our module now! The <code>__wbg_f_greet</code> function is what's generated by
<code>wasm-bindgen</code> to actually get imported in the <code>foo.wasm</code> module.</p>
<p>The generated <code>foo.js</code> we see imports from the <code>./greet</code> module with the <code>greet</code>
name (was the function import in Rust said) and then the <code>__wbg_f_greet</code>
function is shimming that import.</p>
<p>There's some tricky ABI business going on here so let's take a look at the
generated Rust as well. Like before this is simplified from what's actually
generated.</p>
<pre><pre class="playpen"><code class="language-rust">
# #![allow(unused_variables)]
#fn main() {
extern &quot;C&quot; fn greet(a: &amp;str) -&gt; String {
    extern &quot;C&quot; {
        fn __wbg_f_greet(a_ptr: *const u8, a_len: usize, ret_len: *mut usize) -&gt; *mut u8;
    }
    unsafe {
        let a_ptr = a.as_ptr();
        let a_len = a.len();
        let mut __ret_strlen = 0;
        let mut __ret_strlen_ptr = &amp;mut __ret_strlen as *mut usize;
        let _ret = __wbg_f_greet(a_ptr, a_len, __ret_strlen_ptr);
        String::from_utf8_unchecked(
            Vec::from_raw_parts(_ret, __ret_strlen, __ret_strlen)
        )
    }
}
#}</code></pre></pre>
<p>Here we can see that the <code>greet</code> function was generated but it's largely just a
shim around the <code>__wbg_f_greet</code> function that we're calling. The ptr/len pair
for the argument is passed as two arguments and for the return value we're
receiving one value (the length) indirectly while directly receiving the
returned pointer.</p>

                    </main>

                    <nav class="nav-wrapper" aria-label="Page navigation">
                        <!-- Mobile navigation buttons -->
                        
                            <a rel="prev" href="../../contributing/design/exporting-rust-struct.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                                <i class="fa fa-angle-left"></i>
                            </a>
                        

                        
                            <a rel="next" href="../../contributing/design/importing-js-struct.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                                <i class="fa fa-angle-right"></i>
                            </a>
                        

                        <div style="clear: both"></div>
                    </nav>
                </div>
            </div>

            <nav class="nav-wide-wrapper" aria-label="Page navigation">
                
                    <a href="../../contributing/design/exporting-rust-struct.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
                        <i class="fa fa-angle-left"></i>
                    </a>
                

                
                    <a href="../../contributing/design/importing-js-struct.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
                        <i class="fa fa-angle-right"></i>
                    </a>
                
            </nav>

        </div>

        

        

        

        

        <script src="../../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../highlight.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../book.js" type="text/javascript" charset="utf-8"></script>

        <!-- Custom JS scripts -->
        

        

    </body>
</html>
